<template>
    <!-- 普通支付订单 -->
    <div class="ordinaryOrder">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "首页"},{"name": "支付订单", "url": "/ordinaryOrder"}]'></tz-breadcrumb>
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
            <div class="form-item">
                <label for="">订单号</label>
                <el-input class="form-input" clearable v-model="orderNo" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">店铺名称</label>
                <el-input class="form-input" clearable v-model="storeName" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">收银员账号</label>
                <el-input class="form-input" clearable v-model="cashierAccount" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">店铺编号</label>
                <el-input class="form-input" clearable v-model="store_code" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">支付通道实例编号</label>
                <el-input class="form-input" clearable v-model="ways_id" size="medium"></el-input>
            </div>
            <div class="form-item">
                <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
                <a href="javascript:;" style="color: #666;margin-left: 15px;" @click="showAdvance">高级搜索</a>
            </div>
            <el-collapse-transition>
              <div style="padding-top: 15px;" v-if="advancedSearch">
                <div class="form-item mb20">
                    <label for="">支付方式</label>
                    <el-select v-model="payways" placeholder="请选择" size="medium">
                      <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="form-item mb20">
                    <label for="">订单状态</label>
                    <el-select v-model="orderStatus" placeholder="请选择" size="medium">
                      <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="form-item mb20">
                  <label for="">时间选择</label>
                  <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
                </div>
              </div>
            </el-collapse-transition>
        </form>
        <!-- tab展开行 -->
        <el-table v-loading="loading" :data="tableData5" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="流水号:">
                  <span>{{ props.row.trade_no ? props.row.trade_no : '无' }}</span>
                </el-form-item>
                <el-form-item label="收银员账号:">
                  <span>{{ props.row.nickname }}</span>
                </el-form-item>
                <el-form-item label="费率:">
                  <span>{{ props.row.rate }}</span>
                </el-form-item>
                <el-form-item label="手续费:">
                  <span>{{ props.row.rate_amount }}</span>
                </el-form-item>
                <el-form-item label="操作:">
                  <el-button type="warning" plain size="mini">退款</el-button>
                  <el-button type="success" plain size="mini">结算</el-button>
                  <el-button type="danger" plain size="mini">撤销</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="订单号" prop="out_trade_no"></el-table-column>
          <el-table-column label="交易金额" prop="total_amount"></el-table-column>
          <el-table-column label="所属商家" prop="store_name"></el-table-column>
          <el-table-column label="交易时间" prop="created_at"></el-table-column>
          <el-table-column label="支付方式" prop="payways_txt"></el-table-column>
          <el-table-column label="交易状态" prop="pay_status_txt">
            <template slot-scope="scope">
              <el-tag :type="scope.row.pay_status_txt === '支付成功' ? 'primary' : 'warning'" disable-transitions>{{scope.row.pay_status_txt}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain  size="small" @click="ordinaryOrderDetails(scope.row.store_code,scope.row.out_trade_no)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-top: 30px;background: #fff;">
          <el-pagination v-if="total > pageNum" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    // this.initdata();
  },
  data: function () {
    return {
      store_code: '',
      payways: '',
      ways_id: '',
      orderNo: '',
      storeName: '',
      cashierAccount: '',
      start_time: '',
      end_time: '',
      page: 1,
      pageNum: 10,
      total: 0,
      time: [],
      payTypeOptions: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 'alipay',
          label: '支付宝支付'
        },
        {
          value: 'weixin',
          label: '微信支付'
        },
        {
          value: 'sfback',
          label: '银行卡支付'
        },
        {
          value: 'myback',
          label: '网商'
        }
      ],
      payType: 'all',
      orderStatusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'paySuccess',
          label: '支付成功'
        },
        {
          value: 'refundSuccess',
          label: '退款成功'
        }
      ],
      orderStatus: 'all',
      tableData5: [],
      advancedSearch: false,
      loading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.getData();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    },
    timeChange (val) {
      // 日期空间确定时触发
      this.start_time = msToDate(val[0]);
      this.end_time = msToDate(val[1]);
    },
    showAdvance: function () {
      this.advancedSearch = !this.advancedSearch;
    },
    formatter (row, column) {
      return row.address;
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getData () {
      let that = this;
      this.loading = true;

      http.post(api.orderList, {
        token: localStorage.getItem('token'),
        start_date: that.start_time,
        store_code: that.store_code,
        payways: that.payways,
        ways_id: that.ways_id,
        end_date: that.end_time,
        out_trade_no: that.orderNo,
        page: that.page,
        pagesize: that.pageNum
      }, response => {
        console.log(response);
        that.loading = false;
        if (response.code === '10001') {
          that.total = response.data[0].total;
          that.tableData5 = response.data[0].result;
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误，请稍后再试');
      });
    },
    // 订单详情
    ordinaryOrderDetails (id, id2) {
      this.$router.push({
        path: '/ordinaryOrderDetails',
        query: {
          store_code: id,
          out_trade_no: id2
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item
    display: inline-block;
    margin-right: 35px;

    label
      margin-right: 4rem;
      font-size: 14px;
      color: #333;

    .form-input
      max-width: 15rem;

  .line
    height: 4.5rem;

.demo-table-expand
  font-size: 0;

  label
    width: 90px;
    color: #99a9bf;

  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
.mb20
  margin-bottom:20px
</style>
